<template>
  <div>
    <div class="supplier-search-header" v-if="supplierDetail.id && supplierDetail.id>0">
      <div class="left">
        <supplier-box :is-list="false" :detail="supplierDetail"/>
      </div>
      <div class="right">
      </div>
      <div class="c"></div>
    </div>

    <div class="supplier-search-input-box">
      搜索商品名称:
      <el-input clearable style="display: inline-block; width: 1000px;" v-model.trim="searchKeywords"
                @keyup.native.enter="getProductList"/>
      <el-button type="success" v-if="supplierDetail.id>0" v-text="'当前供应商【'+supplierDetail.name+'】'"
                 style="margin-left: 10px" @click="removeSupplier"></el-button>
      <el-button style="margin-left: 10px;" type="primary" @click="getProductList">搜索</el-button>

      <my-button style="float: right; margin-top: 3px;" type="danger" icon="el-icon-shopping-cart-2"
                 :click="function (){openCart()}" text="查看购物车" access-action="SupplierOrder/manage"></my-button>
    </div>
    <div class="block" style="text-align: left">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.page"
        :page-sizes="[10, 20,40, 50, 100,200]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total">
      </el-pagination>
    </div>
    <div class="supplier-search-product-result">
      <supplier-product-box-list ref="supplierProductBoxList" :product-list-params="productList"/>
      <div class="c"></div>
    </div>

    <cart-dialog ref="cartDialog"/>
  </div>
</template>

<script>
import SupplierBox from '../Common/SupplierBox'
import SupplierProductBoxList from '../Common/SupplierProductListBox'
import CartDialog from '../Dialog/CartDialog'
import MyButton from '../Common/MyButton'

export default {
  name: 'SupplierProductSearchPage',
  components: {MyButton, CartDialog, SupplierProductBoxList, SupplierBox},
  data: function () {
    return {
      searchKeywords: '',
      supplierDetail: {},
      productList: [],
      pageData: {
        page: 1,
        pageSize: 100,
        total: 0,
      }
    }
  },
  watch: {
    $route: function () {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    handleSizeChange: function (pageSize) {
      this.pageData.pageSize = pageSize
      this.pageData.page = 1
      this.getProductList()
    },
    handleCurrentChange: function (page) {
      this.pageData.page = page
      this.getProductList()
    },
    init: function () {
      if (this.$route.query.supplierId) {
        this.getSupplierDetail()
      } else {
        this.supplierDetail = {}
        this.getProductList()
      }
    },
    removeSupplier: function () {
      let $this = this
      this.$confirm('您是否要剔除【供应商-' + this.supplierDetail.name + '】查询条件?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.$router.push({
          mame: "SupplierProductSearchPage",
          query: {}
        })
      }).catch(() => {

      })
    },
    // 打开购物车弹窗
    openCart: function () {
      this.$refs.cartDialog.open()
    },
    // 获取供应商详情
    getSupplierDetail: function () {
      let $this = this
      $this.MyRequest(this.ApiDoNameShop + 'Supplier/getDetail', {id: this.$route.query.supplierId}, function (data) {
        $this.supplierDetail = data
        $this.getProductList()
        $this.$forceUpdate()
      })
    },
    // 搜索商品
    getProductList: function () {
      var form = {}
      let $this = this
      if (this.supplierDetail.id > 0) {
        form.supplierId = this.supplierDetail.id;
      }
      if (this.$route.query && this.$route.query.id) {
        form.id = this.$route.query.id
      }
      form.productName = this.searchKeywords
      form.page = $this.pageData.page
      form.pageSize = $this.pageData.pageSize
      $this.MyRequest(this.ApiDoNameShop + 'SupplierProduct/getList', form, function (data) {
        // $this.productList=[]
        $this.$refs.supplierProductBoxList.setList(data.list)
        $this.pageData.total = data.total
        $this.$forceUpdate()
      })
    }
  }
}
</script>

<style scoped>

</style>
